<template>
    <div class="outerDiv">
        <div v-if="!hasOperate" class="midDiv">

            <div style="display: flex;">
                <div style="width: 100px;"><h1>{{retentSecond}}</h1></div>

                <div class="midDiv_list" @click="selectType('塑料瓶')">
                    <div style="background-color: #F0FFF0;">
                        <span><img src="../assets/image/suliao.jpg"/></span>
                        塑料瓶
                    </div>
                </div>
                <div class="midDiv_list" @click="selectType('易拉罐')">
                    <div style="background-color: #F0FFF0;">
                        <span><img src="../assets/image/yl.jpg"/></span>
                        易拉罐
                    </div>
                </div>
                <div class="midDiv_list" @click="selectOther()">
                    <div style="background-color: #F0FFF0;">
                        <span><img src="../assets/image/qt.jpg"/></span>
                        其他
                    </div>

                </div>
            </div>

        </div>

    </div>
</template>

<script>

    import {
        getHardwardStatue,
        startNewRecycling,
        closeDoor,
        getWeight,
        takePhoto,
        getImage,//拍照后上传
        rightRotate,
        openDoor,//开门
        onRight, //处于右转状态
        saveBottle,//保存瓶子信息到远程服务器
        onPlace,
        delImage, //删除图片文件
        //uploadImage, //上传图片
    } from './../api/api'

    export default {
        name: "Choose",
        props: ['code'],
        data() {
            return {
                timer: '',
                onSelected: false,
                weight: 0,//重量值 （克）
                fiveSecond: 5,
                tenSecond: 10,
                hasOperate: false,//判断是否有动作
                retentSecond: 30,//页面停留时间
                timeoutSecond: '',//5秒后，跳回首页
                interval: 5, //每隔5秒去访问一次服务器
                bottleType: '',  //选择的是塑料瓶还是易拉罐
                statueInterval: 1900, //读取硬件状态时间间隔
                statue: '',
                ifStopInterval: false,//是否停止计时器
                waitsecond: 30,//30秒内有没有扫码记录，本机
                count: 8,//如果一直处于开门状态，那么8次后，自动关门，退出
                msg: '',
                ontakephoto:false, //是否正在拍摄
                onright:true,//处于右转状态

            }
        },

        mounted() {
            this.hasOperate = false;
            this.retentSecond = 30;
            console.log("===choose start=====")
            this.retention();
        },
        methods:
            {
                restoreProperty() {
                    clearTimeout(this.timer); //清除延迟执行
                    this.retentSecond = 30;
                    this.hasOperate = false;
                    this.ifStopInterval = false;
                },
                jumptoHome() {

                    this.restoreProperty(); //页面跳转前执行一下初始化值
                    this.$EventBus.$emit('updatemsg', {finished: 1, score: 0, msg: this.$config.nobottlemsg});

                },
                //关门，退出当前页面
                quiteToHome() {
                    this.timer = setTimeout(this.jumptoHome, 2000);
                },

                //从后台读取设备状态
                getStatue() {
                    getHardwardStatue().then((res) => {
                        var that = this;
                         console.log("当前硬件状态:" + res.other + ":" + that.code);

                        //var _code=this.code;
                        //如果一直处于开门状态，没检测到投瓶，5次后，自动关门退出
                        if (res.other == "open") {

                            that.msg = that.$config.startmsg;
                            this.$EventBus.$emit('updatemsg', {finished: 0, score: 0, msg: that.msg});

                            that.count--;
                            that.timeoutSecond = that.count;
                            if (that.count <= 0) {
                                that.ifStopInterval = true;
                                //执行关门
                                setTimeout(function () {
                                    closeDoor();
                                }, 300);

                                this.quiteToHome();
                                // console.log("5次了，还一直处于开门状态，退出吧");
                            } else {
                                //console.log("开门状态");
                                //查看是否到位

                                setTimeout(function () {
                                    onPlace();
                                }, 300);

                            }

                            //this.readHardwarStatue();
                        } else if (res.other == "onPlace") { //就位状态
                            console.log("=========就位等待称重======")
                            that.msg = that.$config.onplacemsg;
                            this.$EventBus.$emit('updatemsg', {finished: 0, score: 0, msg: that.msg});

                            that.timeoutSecond = '';

                            //执行关门
                            setTimeout(function () {
                                closeDoor();
                            }, 300);


                        } else if (res.other == "close" && that.ifStopInterval == false) { //称重完毕，进行拍照操作
                            that.msg = that.$config.weightmsg;
                            //that.$emit("childfinish","称重结束");
                            this.$EventBus.$emit('updatemsg', {finished: 0, score: 0, msg: that.msg});
                            //执行称重
                            console.log("开始称重==");
                            setTimeout(function () {
                                getWeight().then((res) => {
                                    that.weight = res.other;

                                });
                            }, 300);
                            //console.log("拍照完毕");
                        } else if (res.other == "weight" && that.ifStopInterval == false && !that.ontakephoto) { //已关门，进行称重操作
                            that.msg = that.$config.photomsg;
                            that.$EventBus.$emit('updatemsg', {finished: 0, score: 0, msg: that.msg});

                            setTimeout(function () {
                               that.ontakephoto=true;
                               console.log("开始拍照！");
                                takePhoto().then((response) => {
                                   // let _filename = response.other;
                                    that.photoname=response.other;


                                }).catch((exp) => {
                                    console.log(exp);
                                });
                            }, 500);


                        }

                        else if(res.other=='photoed' && that.ifStopInterval == false)
                        {

                             setTimeout(function () {
                                console.log("图片路径:" + that.photoname);
                                getImage(that.photoname).then((r) => {
                                    if(r.other!="")
                                    {
                                        setTimeout(function () {
                                        saveBottle(that.$config.remote_url, that.$config.machineCode, that.weight, that.code, that.bottleType, r.other).then(() => {
                                            console.log("保存瓶子信息到数据库");
                                            //setTimeout(function () {
                                            //  delImage(_filename); //删除图片文件
                                            // }, 2000);
                                            });
                                        }, 300);
                                    }


                                });

                            }, 1000);//4秒后执行
                        }
                        else if (res.other == "getPhotoed" && that.onright) { //已拍照，进行旋转操作
                            that.onright=false;
                            console.log("右转==");
                            setTimeout(function () {
                                rightRotate();




                            }, 300);
                            setTimeout(function () {
                                that.ifStopInterval = true; //停止计时
                                that.msg = "结束,感谢支持";
                                that.timeoutSecond = that.tenSecond;
                                that.popmsg();
                            },1000);




                        }


                        that.statue = res.other;
                    });

                    if (!this.ifStopInterval) {
                        this.readHardwarStatue();
                    }

                },
                //读取硬件状态
                readHardwarStatue() {
                    this.timer = setTimeout(this.getStatue, this.statueInterval);
                },
                //页面停留时间长后，自动跳转到首页
                backToHome() {
                    //如果页面正在被操作，就不执行以下语句
                    if (this.hasOperate) {
                        return;
                    } else {
                        //如果页面没有操作，就会等待1分钟，跳转回到首页
                        this.retentSecond = this.retentSecond - 1;
                        if (this.retentSecond <= 0) {
                            this.jumptoHome();
                        } else {
                            this.retention()
                        }
                    }

                },
                //本页面停留时间，如果超过一分钟，自动跳转到首页
                retention() {
                    this.timer = setTimeout(this.backToHome, 1000);
                },

                //结束后执行
                popmsg() {

                    this.$EventBus.$emit('updatemsg', {finished: 1, score: 1, msg: this.$config.endmsg});

                },
                //选择的是哪个种类的瓶子
                selectType(val) {
                    var that = this;
                    that.hasOperate = true;
                    that.bottleType = val; //您选择的是哪种类型的瓶子

                    that.ontakephoto=false; //可以进行拍照了
                    //获取当前硬件设备的状态

                    setTimeout(function () {
                        openDoor(that.code).then((res) => {
                            console.log( "开门获取代码：" + res.code);
                            if (res.code == 200) //开门成功
                            {
                               // console.log(res.other);
                                that.getStatue();
                            } else if (res.code == 202) {
                                console.log("开门失败");
                            }
                        });
                    }, 300);


                },

                //如果选择的是其他
                selectOther() {
                    this.hasOperate = true;
                    this.msg = this.$config.unsupportmsg;
                    this.$EventBus.$emit('updatemsg', {finished: 1, score: 0, msg: this.msg});
                },


            }
    }
</script>

<style scoped>
    .outerDiv {
        width: 100%;
        margin: 0 auto;
        text-align: left;
        background-color: #F1FFF0;
        /*border: 1px solid #ff00ff;*/
        padding-top: 60px;
        padding-bottom: 20px;
    }

    .midDiv_list {
        flex: 1;
        line-height: 50px;
        height: 50px;
        font-size: 30px;
        color: #00CC66;
        background-color: #F0FFF0;
    }

    .midDiv_list img {
        vertical-align: middle;
    }
</style>